import { Form, Input, Icon, Button, Select, Switch ,Row, Col, message} from 'antd';
import { useDynamicList, useRequest, useUpdate } from '@umijs/hooks';
import React, { useState, useRef, useCallback, useEffect } from 'react';


const DynamicFieldSet = (props) => {
  const { timeDifferenceInfoData, form:{ getFieldDecorator, getFieldValue, setFieldsValue, validateFields, getFieldsValue } } = props;
  
  const { list, getKey, push, remove, resetList, replace } = useDynamicList();
  useEffect(() => {
    if (timeDifferenceInfoData && timeDifferenceInfoData.length > 0 && timeDifferenceInfoData[0].leftConditionValue) {
      resetList(timeDifferenceInfoData)
    } else {
      resetList([
        {
          leftConditionValue: '0',
          conditionValue: '',
          economyClassStandard: '',
          payMoney: ''
        }
      ])
    }
  }, [timeDifferenceInfoData])

  return (
    <div
      style={{
        marginBottom: 16,
      }}
    >
      <div>
        {list.map((ele, index) => (
          <Row type="flex" justify="start" style={{ marginBottom: 16 }} key={index} >
            <Col >
              <Form.Item >
              <span style={{fontSize: '15px'}}>{index+1}. 改签航班时差  </span>
                {getFieldDecorator(`params[${index}].leftConditionValue`, {
                  initialValue: ele.leftConditionValue,
                })(<Input style={{width: '50px', margin: '0 5px'}} type='text' disabled={true} />)}
                小时 &lt;= 延误时长 &lt;
              </Form.Item>
            </Col>
            <Col>
              <Form.Item style={{marginBottom: '0'}}>
                {getFieldDecorator(`params[${index}].conditionValue`, {
                  initialValue: ele.conditionValue,
                  validateTrigger: ['onChange', 'onBlur'],
                  rules: [{
                    validator: (rule,value,callback) => {
                      let reg = /^\+?[1-9]\d*$/
                      if (!value) {
                        callback('请输入结束值')
                        return false
                      } else if (value && !reg.test(value)){
                        callback('请输入正整数')
                        return false
                      } else if ( value && getFieldValue(`params[${index}].leftConditionValue`) && (value-getFieldValue(`params[${index}].leftConditionValue`)) <= 0) {
                        callback('请输入大于开始时间的值')
                        return false
                      } else {
                        return true
                      }
                    }
                  }],
                })(<Input style={{width: '50px', margin: '0 15px'}}
                  onChange={(e) => {
                  if (index < list.length - 1) {
                    replace(index + 1, {
                      leftConditionValue: Number(e.target.value)
                    })
                  }
                }}/>)}
                小时， 
              </Form.Item>
            </Col>
            <Col>
              <Form.Item style={{marginBottom: '0'}}>
                  <span style={{display: 'inline-block', width: '190px'}}>补偿标准按照原航班舱位全价</span>
                  {getFieldDecorator(`params[${index}].damagePart`, {
                    initialValue: ele.damagePart,
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [
                      {
                       required: true,
                       message: '请输入补偿百分比' 
                      },
                      {
                        pattern: /^([1-9]|[1-9]\d|100)$/,
                        message: '补偿百分比必须大于0小于100%'
                    }
                  ],
                  })(<Input  style={{width: '120px', margin: '0 15px'}} addonAfter="(%)"/>)}
              </Form.Item>
              <Form.Item style={{marginBottom: '0'}}>
                <div style={{width: '360px'}}>
                  <span style={{display: 'inline-block', width: '190px'}}>或补偿固定金额</span>
                  {getFieldDecorator(`params[${index}].payMoney`, {
                    initialValue: ele.payMoney,
                    validateTrigger: ['onChange', 'onBlur'],
                    rules: [
                      {
                        validator: (rule,value,callback) => {
                          let reg = /^\+?[1-9]\d*$/
                          if (!value) {
                            if (getFieldsValue()['params'][index]['damagePart'] !== '100') {
                              callback('请输入固定补偿金额')
                              return false
                            } else {
                              return true
                            }
                          } else if (!reg.test(value)){
                            callback('请输入正整数')
                            return false
                          } else {
                            return true
                          }
                        }
                      }
                    ]
                  })(<Input style={{width: '120px', margin: '0 15px'}} addonAfter="(元)"/>)}
                </div>
              </Form.Item>
            </Col>
            <Col>
              {list.length > 1 && index ===(list.length-1) && (
                <Icon
                  type="minus-circle-o"
                  style={{
                    marginLeft: 8,
                  }}
                  onClick={() => {
                    remove(index);
                  }}
                />
              )}
              {
                index === list.length-1 && (
                  <Icon
                    type="plus-circle-o"
                    style={{
                      marginLeft: 8,
                    }}
                    onClick={() => {
                      let temp = getFieldsValue()['params'].reverse()[0] // 获取规则项最后一条数据
                      if (temp['conditionValue'] && temp['leftConditionValue'] && temp['conditionValue'] !== '0') {
                        push({
                          leftConditionValue: temp['conditionValue'],
                          conditionValue: '',
                          damagePart: '',
                          payMoney: ''
                        })
                      } else {
                        message.error('配置项时间为空，不允许新增条目')
                        return false
                      }
                    }}
                  />
                )
              }
            </Col>
          </Row>
        ))}
      </div>
    </div>
  );
}
export default DynamicFieldSet;
